<template>
  <div>
    <div style>
      <i class="el-icon-s-fold" style="float:left"></i>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/msg' }">消息管理</el-breadcrumb-item>
        <el-breadcrumb-item>回复消息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="con">
      <div class="con-top">
        <div class="name" style="position:relative">{{talkname}}</div>
        <ul
          id="talk"
          class="infinite-list top-con"
          style="overflow:auto"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"
        >
          <div style="margin-left:591px">
            <!-- <i class="el-icon-loading" style="font-size:30px" v-if="loading"></i> -->
          </div>
          <p style="padding-left:537px;font-size:30px">没有更多了</p>
          <div
            v-for="item in talkcons"
            :key="item.id"
            :class="item.to_user_id == userid ? 'chat-box-contentleft' : 'chat-box-contentright'"
          >
            <div
              :class="item.to_user_id == userid ? 'chat-box-contentleftimg' : 'chat-box-contentrightimg'"
            >
              <img src="../assets/img/小黄鸡.png" alt />
            </div>
            <el-button
              v-if="item.atch_addr!=''"
              style="margin-right:10px"
              @click="downfile(item.atch_addr)"
            >下载文件</el-button>
            <span class="content">{{item.content}}</span>
            <span>{{item.replaytime}}</span>
          </div>
        </ul>
      </div>
      <div class="jindutiao" v-if="showor">
        <el-progress :text-inside="true" :stroke-width="16" :percentage="speed-0"></el-progress>
        <el-button type="primary" style="margin-top:5px" @click="nosend">取消发送</el-button>
      </div>

      <div class="con-bottom">
        <div>
          <el-upload
            action="http://duty.myxy99.cn/api/admin/uploadfile"
            :headers="{ Authorization:token}"
            :on-success="success1"
            :on-error="error1"
            name="attachments"
            :show-file-list="false"
            :on-progress="progress1"
            :on-change="changecaca"
          >
            <i class="el-icon-folder-opened" style="font-size:30px"></i>
          </el-upload>
          <!-- <label for="a" style="cursor:pointer;" title="点击发送文件">
            <i class="el-icon-folder-opened" style="font-size:30px"></i>
          </label>-->
        </div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="talkcon"
          style="margin-top:8px"
          @keyup.native.enter="send"
        ></el-input>

        <el-button type="primary" class="btn" @click="send">发送</el-button>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  created() {
    this.token = window.sessionStorage.token;
    var that = this;
    if (window.WebSocket) {
      // 端口和ip地址对应不要写错
      this.webSocket = new WebSocket(
        "ws://39.106.33.62:9502?fromId=" +
          window.sessionStorage.user_ID +
          "&toId=" +
          window.sessionStorage.talkid
      );

      this.webSocket.onopen = function(event) {
        console.log("webSocket 链接成功");
        console.log(event);
      };

      //收到服务端消息回调
      this.webSocket.onmessage = function(event) {
        console.log(event);
        if (JSON.parse(event.data).code == 201) {
          let con = {
            code: 201,
            content: JSON.parse(event.data).content,
            to_user_id: that.allid,
            replaytime: "",
            atch_addr: JSON.parse(event.data).file
          };
          that.pushcon(con);
        } else if (JSON.parse(event.data).code == 101) {
          console.log(JSON.parse(event.data).content);
          that.$emit("peoples", JSON.parse(event.data).content);
        } else if (JSON.parse(event.data).code == 100) {
          alert(JSON.parse(event.data).content);
        }
      };
    } else {
      console.log("您的浏览器不支持WebSocket");
    }
    this.userid = window.sessionStorage.user_ID;
    this.allid = window.sessionStorage.talkid;
    console.log(this.allid);
    this.getmsg(this.page);
    this.talkname = window.sessionStorage.talkname;
  },
  mounted() {
    this.scrollToBottom();
    this.loading = false;
  },
  updated: function() {
    this.scrollToBottom();
  },
  data() {
    return {
      // 网页的token
      token: "",
      // webSocket
      webSocket: null,
      // 整个聊天记录的id
      allid: "",
      // 页数
      page: "1",
      // 最后一个
      lastpage: "",
      // 没了的显示
      havenone: false,
      // 当前时间
      currentTime: Date.parse(new Date()),
      talkcon: "",
      // 聊天记录
      talkcons: [],
      loading: false,
      // 通信时的两个名字
      fromName: "",
      toName: "",
      // 传送文件id
      attachment_id: "",
      // 上传的进度
      speed: "0",
      // 进度条显示与隐藏
      showor: false,
      // 定时器的名称
      timer: null,
      // 上传进度
      caca: "1",
      // 下载的按钮
      download: false,
      // 发送文件名字
      filename: "",
      //我的id
      userid: "",
      // 和你聊天的人的名字
      talkname: ""
    };
  },
  computed: {
    disabled() {
      return this.loading;
    }
  },
  methods: {
    // 改变caca
    changecaca() {
      this.caca = 1;
      this.speed = "0";
    },
    // 取消发送
    nosend() {
      this.caca = 2;
      this.showor = false;
      this.speed = "0";
    },
    async getmsg(page) {
      let msg = await this.$http.get("admin/msgrecord?page=" + page, {
        params: {
          fromuser_id: this.allid
        }
      });
      this.talkcons = msg.data.data.data;
      this.talkcons.reverse(); 
      for (let i = 0; i < this.talkcons.length; i++) {
        if (this.talkcons[i].atch_addr == null) {
          this.talkcons[i].atch_addr = "";
        }
      }
      if (msg.data.data.data[0].to_user_id == this.allid) {
        this.fromName = msg.data.data.data[0].from_user_name;
        this.toName = msg.data.data.data[0].to_user_name;
      } else {
        this.fromName = msg.data.data.data[0].to_user_name;
        this.toName = msg.data.data.data[0].from_user_name;
      }
      this.lastpage = msg.data.data.last_page;
      console.log(msg);
    },
    // 加载函数
    async load() {
      this.loading = true;
      this.page++;
      let msg = await this.$http.get("admin/msgrecord?page=" + this.page, {
        params: {
          fromuser_id: this.allid
        }
      });

      let a = msg.data.data.data;
      a.reverse(); 
      let b = a.concat(this.talkcons);
      for (let i = 0; i < b.length; i++) {
        if (b[i].atch_addr == null) {
          b[i].atch_addr = "";
        }
      }
      this.talkcons = b;
      this.loading = false;
    },
    send() {
      console.log("傲");
      let time = this.$options.filters["formatDate"];
      let times = time(Date.parse(new Date()));
      let con = {
        code: 201,
        content: this.talkcon,
        to_user_id: 999999,
        replaytime: times,
        atch_addr: ""
      };
      this.talkcons.push(con);
      let message = this.talkcon;
      this.talkcon = "";
      this.scrollToBottom();
      var data = {
        code: 201,
        fromName: this.fromName,
        toName: this.toName,
        content: message,
        // atch_addr: this.attachment_idawdw,
        atch_addr: "",
        replay_time: Date.parse(new Date()),
        fromId: this.userid,
        toId: this.allid
      };

      this.webSocket.send(JSON.stringify(data));
    },
    // 下滚的函数
    scrollToBottom() {
      this.$nextTick(() => {
        var container = this.$el.querySelector("#talk");
        container.scrollTop = container.scrollHeight;
      });
    },
    pushcon(con) {
      this.talkcons.push(con);
    },
    // 上传成功的函数
    success1(val) {
      if (val.msg == "上传失败，请重试！") {
        this.$message.error("上传失败，请重试！");
        this.showor = false;
        this.speed = "0";
      } else {
        console.log("👴成功了");
        console.log(val);
        this.showor = false;
        this.speed = "0";
        let time = this.$options.filters["formatDate"];
        let times = time(Date.parse(new Date()));
        let con = {
          code: 201,
          content: "已上传文件:" + val.data.path,
          to_user_id: 999999,
          replaytime: times,
          atch_addr: val.data.path
        };
        this.talkcons.push(con);
        this.talkcon = "";
        this.scrollToBottom();
        var data = {
          code: 201,
          fromName: this.fromName,
          toName: this.toName,
          content: this.filename,
          atch_addr: val.data.path,
          replay_time: Date.parse(new Date()),
          fromId: this.userid,
          toId: this.allid
        };

        this.webSocket.send(JSON.stringify(data));
      }
    },
    // 上传失败的函数
    error1() {
      this.$message.error("发送文件失败！");
    },
    // 下载文件的函数
    downfile(path) {
      let tokentest = this.token.split(" ");

      window.location.href =
        "http://duty.myxy99.cn/api/getfile/" + path + "?token=" + tokentest[1];
    },
    // 上传时的函数
    progress1(val, file) {
      this.filename = file.name;
      if (this.caca == "1") {
        this.showor = true;
        this.speed = val.percent;
      }
    }
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    }
  }
};
</script>

<style lang='less' scoped>
.content {
  overflow: scroll;
}
.con {
  width: 1296px;
  min-height: 725px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 20px auto 0;
  padding-left: 20px;
  padding-right: 20px;
}
.con-top {
  height: 480px;
  border-bottom: 1px solid black;
  overflow: hidden;
  padding-bottom: 2px;
}
.top-con {
  height: 398px;
  overflow: auto;
}
.name {
  text-align: center;
  padding: 10px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  margin-bottom: 10px;
}

/* 聊天内容 */
.talk-con {
  border: 2px solid rgba(0, 0, 0, 0.5);
  opacity: 0.8;
  border-radius: 10px;
  padding: 10px 5px;
  margin-right: 5px;
  height: 100%;
}

/* 失败的发送 */
.error {
  margin-bottom: 15px;
  text-align: center;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  cursor: pointer;
}

/* 底部内容 */
.con-bottom {
  height: 250px;
  padding-top: 15px;
  position: relative;
}
.btn {
  position: absolute;
  bottom: 30px;
  right: 0;
}

/* 下面是杨罡的代码 */
.chat-box {
  margin-top: 20px;
  padding: 10px;
  height: 64%;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  overflow: auto;
}

.chat-box-contentleft {
  width: 100%;
  display: block;
  height: auto;
  margin: 30px 0;

  .chat-box-contentleftimg {
    display: inline-block;
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    box-sizing: border-box;
    padding: 5px 9px;
    margin-right: 20px;
    vertical-align: top;
  }

  > span:nth-of-type(1) {
    height: auto;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    max-width: 60%;
    line-height: 30px;
    padding: 10px 20px;
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle;
  }
}

.chat-box-contentright {
  margin: 30px 0;
  width: 100%;
  height: auto;
  display: block;
  direction: rtl;
  min-height: 55px;

  .chat-box-contentrightimg {
    width: 55px;
    display: inline-block;
    height: 55px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    box-sizing: border-box;
    padding: 5px 9px;
    vertical-align: top;
  }

  > span:nth-of-type(1) {
    display: inline-block;
    padding: 10px 20px;
    height: auto;
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin-right: 20px;
    line-height: 30px;
    max-width: 60%;
    vertical-align: middle;
  }

  > span:nth-of-type(2) {
    margin-right: 20px;
  }

  .chat-box-contentrightimg,
  span {
    display: inline-block;
    direction: ltr;
  }
}
</style>